<template>
    <div class="page">
      <!-- 侧边导航栏 -->
      <nav class="sidebar">
        <ul>
          <li @click="navigateTo('/welcome')">首页</li>
          <li @click="navigateTo('/dashboard')">基地详情</li>
          <li @click="navigateTo('/BaseAdd')">基地添加</li>
          <li @click="navigateTo('/BaseDelete')">基地删除</li>
          <li @click="navigateTo('/BaseEdit')">基地修改</li>
          <!-- 添加其他导航选项 -->
        </ul>
      </nav>
  
      <!-- 右侧内容区域 -->
      <div class="content">
        <h1>dashboard</h1>
        <p>登录成功!</p>
        <button @click="goBack">返回登录</button>
      </div>
    </div>
  </template>
  
  <script>
  import { useRouter } from 'vue-router';
  
  export default {
    setup() {
      const router = useRouter();
  
      // 导航到指定路由
      function navigateTo(route) {
        router.push(route);
      }
  
      // 返回登录页面
      function goBack() {
        router.push('/');
      }
  
      return {
        navigateTo,
        goBack,
      };
    },
  };
  </script>
  
  <style scoped>
  /* 样式调整，使导航栏在左侧并占据整个左侧高度 */
  .page {
    display: flex;
  }
  
  .sidebar {
    width: 20%; /* 可根据需求调整宽度 */
    background-color: #333;
    color: white;
    height: 100vh; /* 100%视窗高度，占据整个左侧高度 */
    overflow-y: auto; /* 如果内容超出高度，添加滚动条 */
  }
  
  .sidebar ul {
    list-style-type: none;
    padding: 0;
  }
  
  .sidebar ul li {
    padding: 10px;
    cursor: pointer;
  }
  
  .content {
    flex: 1; /* 填充剩余空间 */
    padding: 20px;
  }
  
  /* 样式调整，使导航选项看起来更明显 */
  .sidebar ul li:hover {
    background-color: #555;
  }
  </style>
  